import React from 'react';
import { Form, Radio, InputNumber, Modal } from 'antd';
import { MarkConfig } from '../../components';
import styles from './ExtendRule.less';

const EstimateForm = ({ form, titleStyle, data }) => {
    const { getFieldDecorator } = form;
    const { taskBusinessExtendEstimationRuleVO = {} } = data;

    const {
        estimationConfiguration = [],
        estimationLimitFlag = '',
        estimationOverdueDays = '',
        // estimationUrgeHours = '',
        // estimationUrgeIntervalHours = '',
        estimationUrgeLimitFlag = '',
        // estimationUrgeMaxTimes = '',
        reEstimationLimitFlag = '',
        reEstimationOverdueDays = ''
    } = taskBusinessExtendEstimationRuleVO;
    const limitDecimals = (values = 1) => {
        if (values) {
            return parseInt(values, 10);
        }
        return '';
    };
    const handleRadioChange = (e, type) => {
        Modal.confirm({
            title: `确定切换为${e.target.value ? '限制' : '不限制'}？`,
            onOk() {
                form.setFieldsValue({
                    [type]: e.target.value
                });
            },
            onCancel() {
                form.setFieldsValue({
                    [type]: e.target.value ? 0 : 1
                });
            }
        });
    };

    const renderInput = (paramName, formItemName, initialValue) => (
        <Form.Item>
            {getFieldDecorator(paramName, {
                initialValue:
                    taskBusinessExtendEstimationRuleVO[paramName] &&
                    taskBusinessExtendEstimationRuleVO[paramName] !== ''
                        ? taskBusinessExtendEstimationRuleVO[paramName]
                        : initialValue,
                rules: [
                    {
                        required: true,
                        message:
                            paramName === 'scoreUrgeMaxTimes'
                                ? '请输入人工估算催办提醒次数'
                                : '请输入人工估算自动催办时间'
                    }
                ]
            })(
                <InputNumber
                    min={1}
                    max={99999}
                    style={{ width: 75 }}
                    formatter={limitDecimals}
                    parser={limitDecimals}
                />
            )}
        </Form.Item>
    );
    return (
        <div>
            <div className={styles.headTitle}>估算规则</div>
            <div className={styles.line}></div>
            <div style={titleStyle}>截止时间配置</div>
            <div className={styles.formRow}>
                <Form.Item label="人工估算逾期时间" required>
                    {getFieldDecorator('estimationLimitFlag', {
                        initialValue: estimationLimitFlag === '' ? 0 : estimationLimitFlag
                    })(
                        <Radio.Group style={{ width: 160 }} onChange={e => handleRadioChange(e, 'estimationLimitFlag')}>
                            <Radio value={0}>不限制</Radio>
                            <Radio value={1}>限制</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
                {!!form.getFieldValue('estimationLimitFlag') && (
                    <>
                        从可开始估算节点的第
                        <Form.Item>
                            {getFieldDecorator('estimationOverdueDays', {
                                initialValue: estimationOverdueDays === '' ? 5 : estimationOverdueDays,
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入人工估算逾期时间'
                                    }
                                ]
                            })(
                                <InputNumber
                                    min={0}
                                    max={99999}
                                    style={{ width: 75 }}
                                    formatter={limitDecimals}
                                    parser={limitDecimals}
                                />
                            )}
                        </Form.Item>
                        个自然日后算逾期评估
                    </>
                )}
            </div>
            <div className={styles.formRow}>
                <Form.Item label="截止重估申请时间" required>
                    {getFieldDecorator('reEstimationLimitFlag', {
                        initialValue: reEstimationLimitFlag === '' ? 0 : reEstimationLimitFlag
                    })(
                        <Radio.Group
                            style={{ width: 160 }}
                            onChange={e => handleRadioChange(e, 'reEstimationLimitFlag')}
                        >
                            <Radio value={0}>不限制</Radio>
                            <Radio value={1}>限制</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
                {!!form.getFieldValue('reEstimationLimitFlag') && (
                    <>
                        从最后一个估算人估算完成后第
                        <Form.Item>
                            {getFieldDecorator('reEstimationOverdueDays', {
                                initialValue: reEstimationOverdueDays === '' ? 30 : reEstimationOverdueDays,
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入截止重估申请时间'
                                    }
                                ]
                            })(
                                <InputNumber
                                    min={0}
                                    max={99999}
                                    style={{ width: 75 }}
                                    formatter={limitDecimals}
                                    parser={limitDecimals}
                                />
                            )}
                        </Form.Item>
                        个自然日后截止发起重估；
                    </>
                )}
            </div>
            <div style={titleStyle}>自动催办配置</div>
            <div className={styles.formRow}>
                <Form.Item label="人工估算自动催办时间" required>
                    {getFieldDecorator('estimationUrgeLimitFlag', {
                        initialValue: estimationUrgeLimitFlag === '' ? 0 : estimationUrgeLimitFlag
                    })(
                        <Radio.Group
                            style={{ width: 160 }}
                            onChange={e => handleRadioChange(e, 'estimationUrgeLimitFlag')}
                        >
                            <Radio value={0}>不限制</Radio>
                            <Radio value={1}>限制</Radio>
                        </Radio.Group>
                    )}
                </Form.Item>
                {!!form.getFieldValue('estimationUrgeLimitFlag') && (
                    <>
                        从可开始估算节点的第
                        {renderInput('estimationUrgeHours', 'auditAuto', 5)}
                        个小时后开始；每隔
                        {renderInput('estimationUrgeIntervalHours', 'auditAuto', 5)}
                        个小时重复推送提醒
                        {renderInput('estimationUrgeMaxTimes', 'auditAuto', 3)}
                        次后停止提醒；
                    </>
                )}
            </div>
            <div style={titleStyle}>人员配置</div>
            <div className={styles.formRow}>
                <Form.Item label="工作量估算发起人配置" required>
                    {getFieldDecorator('estimationConfiguration', {
                        initialValue: estimationConfiguration || [],
                        rules: [
                            {
                                required: true,
                                validator(_, value, callback) {
                                    let lineLimit = false;
                                    if (value.length > 0) {
                                        lineLimit = true;
                                    }

                                    if (!lineLimit) {
                                        callback('请添加工作量估算发起人配置');
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ]
                    })(<MarkConfig type="estimate" form={form} />)}
                </Form.Item>
            </div>
        </div>
    );
};
export default EstimateForm;
